<template>
	<div class="page-index diy-body" :style="bgStyle">
		<!-- 小程序头部兼容 -->
		<!-- #ifdef MP -->
		<view class="mp-search-box">
			<input class="ser-input" type="text" placeholder="输入关键字搜索" disabled @click="search"/>
		</view>
		<!-- #endif -->
		<div style="width: 100%;height: 53px;"></div>
		<div class="diy-item" v-for="(item, index) in diyData" :key="index">
			<!-- 小程序不支持动态组件 -->
			<blank v-if="item.type === 'blank'" :item="item" :menu-map="menuMap" :domain="domain"></blank>
			<cate v-else-if="item.type === 'cate'" :item="item" :menu-map="menuMap" :domain="domain"></cate>
			<cLine v-else-if="item.type === 'cLine'" :item="item" :menu-map="menuMap" :domain="domain"></cLine>
			<coupon v-else-if="item.type === 'coupon'" :item="item" :menu-map="menuMap" :domain="domain"></coupon>
			<cSlider v-else-if="item.type === 'cSlider'" :item="item" :menu-map="menuMap" :domain="domain"></cSlider>
			<cTitle v-else-if="item.type === 'cTitle'" :item="item" :menu-map="menuMap" :domain="domain"></cTitle>
			<goods v-else-if="item.type === 'goods'" :item="item" :menu-map="menuMap" :domain="domain"></goods>
			<news v-else-if="item.type === 'news'" :item="item" :menu-map="menuMap" :domain="domain"></news>
			<notice v-else-if="item.type === 'notice'" :item="item" :menu-map="menuMap" :domain="domain"></notice>
			<picMagic v-else-if="item.type === 'picMagic'" :item="item" :menu-map="menuMap" :domain="domain"></picMagic>
			<seckill v-else-if="item.type === 'seckill'" :item="item" :menu-map="menuMap" :domain="domain"></seckill>
			<sliderGroup v-else-if="item.type === 'sliderGroup'" :item="item" :menu-map="menuMap" :domain="domain"></sliderGroup>
		</div>
	</div>
</template>

<script>
	import {
		BASE_URL
	} from '@/config/app'
	import blank from './components/blank.vue'
	import cate from './components/cate.vue'
	import cLine from './components/cLine.vue'
	import coupon from './components/coupon.vue'
	import cSlider from './components/cSlider.vue'
	import cTitle from './components/cTitle.vue'
	import goods from './components/goods.vue'
	import news from './components/news.vue'
	import notice from './components/notice.vue'
	import picMagic from './components/picMagic.vue'
	import seckill from './components/seckill.vue'
	import sliderGroup from './components/sliderGroup.vue'

	export default {
		components: {
			blank,
			cate,
			cLine,
			coupon,
			cSlider,
			cTitle,
			goods,
			news,
			notice,
			picMagic,
			seckill,
			sliderGroup
		},
		data() {
			return {
				domain: BASE_URL,
				bgStyle: "",
				diyBg: {},
				diyData: [],
				menuMap: ['/pages/index/index', '/pages/category/category', '/pages/cart/cart', '/pages/user/user']
			}
		},
		// 分享给好友
		onShareAppMessage(res) {
			return {
				title: 'SparkShop商城',
				path: '/pages/index/index'
			}
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: 'SparkShop商城',
				path: '/pages/index/index'
			};
		},
		mounted() {
			this.getHomeData()
		},
		methods: {
			// 获取首页数据
			async getHomeData() {
				let res = await this.$api.home.home.get()
				this.diyBg = res.data.diyBg
				this.diyData = res.data.diyData
				
				this.diyBg.bgImg = this.domain + this.diyBg.bgImg
				this.handleHomeBg(this.diyBg)
			},
			// 首页背景样式处理器
			handleHomeBg(data) {
				if (data.bgType == 2) {
					this.bgStyle = 'background-image: url(' + data.bgImg + ');'
					if (data.bgStyle == 1) {
						this.bgStyle += 'background-size: 100%;background-repeat: no-repeat;'
					} else if (data.bgStyle == 2) {
						this.bgStyle += 'background-size: 100%;background-repeat: repeat;'
					} else {
						this.bgStyle += 'background-size: 100% 100%;background-repeat: no-repeat;'
					}
				} else {
					this.bgStyle = 'background:' + data.bgColor;
				}
			},
			// h5 搜索
			onNavigationBarSearchInputConfirmed(val) {
				uni.navigateTo({
					url: `/pages/index/search?keywords=` + val.text
				})
			},
			// 小程序搜索
			search() {
				uni.navigateTo({
					url: `/pages/index/search`
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
html, body,#app {
    width: 100%;
    height: 100%;
}	
.diy-search input {
    border-radius: 20px;
}
.diy-body {
    margin: 0 auto;
    border: 1px solid #f0f1f3;
    border-top: none;
    background-color: #f6f9ff;
    min-height: calc(100vh - 190px);
    padding-bottom: 10px;
	padding-left:10px;
	padding-right: 10px;
}
.component-item:first-child {
    margin-top: 0;
}
.component-item {
    display: flex;
    width: 100%;
    position: relative;
    margin-top: 5px;
}
/* #ifdef MP */
.mp-search-box{
	position:absolute;
	left: 0;
	top: 30upx;
	z-index: 9999;
	width: 100%;
	padding: 0 20upx;
	.ser-input{
		flex:1;
		height: 56upx;
		line-height: 56upx;
		text-align: center;
		font-size: 28upx;
		color:$font-color-base;
		border-radius: 20px;
		background-color: rgb(246, 249, 255);
	}
}
page{
	.cate-section{
		position:relative;
		z-index:5;
		border-radius:16upx 16upx 0 0;
		margin-top:-20upx;
	}
	.carousel-section{
		padding: 0;
		.titleNview-placing {
			padding-top: 0;
			height: 0;
		}
		.carousel{
			.carousel-item{
				padding: 0;
			}
		}
		.swiper-dots{
			left:45upx;
			bottom:40upx;
		}
	}
}
/* #endif */
</style>